<template>
  <b-card no-body>
    <b-card-header class="border-0">
      <h3 class="mb-0">盈亏记录</h3>
    </b-card-header>

    <el-table
      class="table-responsive table"
      header-row-class-name="thead-light"
      :data="tableData_showed"
    >
      <el-table-column label="日期"  prop="date">
      </el-table-column>
      <el-table-column label="成交笔数" prop="trade_count" >
      </el-table-column>

      <el-table-column label="开盘持仓" prop="start_poses">
      </el-table-column>

      <el-table-column label="收盘持仓" prop="end_poses" >
      </el-table-column>

      <el-table-column label="成交额" prop="turnover" >
      </el-table-column>
      <el-table-column label="手续费" prop="commission">
      </el-table-column>
      <el-table-column label="滑点" prop="slippage" >
      </el-table-column>
      <el-table-column label="交易盈亏" prop="trading_pnl" >
      </el-table-column>
      <el-table-column label="持仓盈亏" prop="holding_pnl">
      </el-table-column>
      <el-table-column label="总盈亏" prop="total_pnl" >
      </el-table-column>
      <el-table-column label="净盈亏" prop="net_pnl" >
      </el-table-column>
    </el-table>

    <b-card-footer class="py-4 d-flex justify-content-end">
      <el-pagination
        layout="prev, pager, next"
        :total="tableData_length"
        :page-size="table_size"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </b-card-footer>
  </b-card>
</template>
<script>
import { Table, TableColumn, Pagination } from "element-ui";
export default {
  name: "dailypnl-record-table",
  components: {
    [Pagination.name]: Pagination,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
  },
  data() {
    return {
      tableData: null,
      tableData_showed: null,
      tableData_length: 0,
      currentPage: 1,
      table_size: 10,
    };
  },
  methods: {
    update_tableData(data) {
      this.tableData = data;
      this.tableData_length = data.length;
      this.tableData_showed = this.tableData.slice(0, this.table_size);
    },
    handleCurrentChange(val) {
      //val为当前页数
      this.currentPage = val;
      this.tableData_showed = this.tableData.slice(
        (val - 1) * this.table_size,
        val * this.table_size
      );
    },
  },
};
</script>
